{% extends "users/auth/base.html" %}
{% load static %}

{% block "scripts" %}
	<script src="{% static "js/password-forgot.js" %}" defer></script>
{% endblock %}

{% block "login-content" %}

<form id="forgotten-password" class="animate__animated animate__fadeInUp animate__fast d-flex flex-grow flex-column text-dark bg-light rounded-3 shadow-lg p-4 m-4" method="post" action="{% url 'users:forgot-password' %}" style="min-width: 550px; max-width: 30%;" novalidate>
	{% csrf_token %}
	
	<h3 class="mb-4 bg-light"><b>Forgot Password</b></h3>

	{% if feedback %}
	<div class="text-success mb-2">
		Please check your email inbox for a reset link.
	</div>
	{% endif %}

	<!-- Course Code -->
	<div class="mb-3">
		<label for="id_course_code" class="form-label text-dark fw-bold">Course Code: </label>
		<input type="text" name="course_code" class="form-control bg-light border-dark border-2 {% if form.errors.username %} is-invalid{% endif %}" id="id_course_code" placeholder="e.g. CS123ABC" required>
		<div id="course_code_invalid" class="invalid-feedback">
		</div>
	</div>

	<div class="mb-3">
		<button type="submit" class="btn btn-primary rounded-pill text-light mt-3">
			<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" fill="currentColor" class="bi bi-key-fill" viewBox="1 1 16 16">
				<path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
			</svg>
			Request Password Reset
		</button>
	</div>

	<!-- Login -->
	<div class="d-flex flex-row justify-content-between mb-3">
		<span>Remembered your password? <a href="javascript:void(goTo('{% url 'users:login' %}'));" style="text-decoration: none">Login.</a></span>
	</div> 
	
</form>

{% endblock %}